<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑</title>
    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>

    <script th:src="@{note/wangEditor.min.js}"></script>
</head>
<style>
    .toolbar {
        border: 1px solid #ccc;
    }

    .text {
        border: 1px solid #ccc;
        min-height: 300px;
    }
</style>
<body>
<div id="toolbar-container" class="toolbar"></div>
<div id="text-container" class="text"></div>
<div class="layui-inline" align="center">
    <label class="layui-form-label">记录时间</label>
    <div class="layui-input-inline">
        <input th:hidden="${createTime}" id="createOldTime" value="-1"/>
        <input type="text" class="layui-input" id="createTime" placeholder="yyyy-MM-dd HH:mm:ss"/>
    </div>
</div>
<div align="center">
    <input th:hidden="${nId}" id="nId" value="-1"/>
    <button class="layui-btn layui-btn-primary" id="save-btn" i18n="save-btn" onclick="saveNote()">保存</button>
</div>
</body>
<!--https://doc.wangeditor.com/pages/01-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8/01-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html-->
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    var editor
    $(function () {
        var text = '[[${text}]]';
        var nId = '[[${nId}]]';
        var createTime = '[[${createTime}]]';
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            if (createTime == null || createTime == undefined || createTime == 'undefined') {
                //初始赋值
                laydate.render({
                    elem: '#createTime',
                    value: new Date(),
                    type: 'datetime',
                    isInitValue: true
                });
            }else{
                //初始赋值
                laydate.render({
                    elem: '#createTime',
                    value: createTime,
                    type: 'datetime',
                    isInitValue: true
                });
            }

        });
        const E = window.wangEditor
        editor = new E('#toolbar-container', '#text-container') // 传入两个元素
        // 自定义菜单
        editor.config.menus = [
            'head',
            'bold',
            'italic',
            'underline',
            'justify',
            'undo',
            'redo',
            'image'
        ],
            // 设置编辑区域高度为 500px
            editor.config.height = 300
        // 隐藏“网络图片”tab
        editor.config.showLinkImg = false;
        // 关闭粘贴内容中的样式
        editor.config.pasteFilterStyle = false;
        // 忽略粘贴内容中的图片
        editor.config.pasteIgnoreImg = true;
        //上传图片时，可自定义filename（controller层需要设置传入的名字时保持一致）
        editor.config.uploadFileName = 'file';
        // 配置服务器端地址 upload:上传图片地址（调用controller层接口）
        editor.config.uploadImgServer = '/n/v1/upload';
        // 将图片大小限制为 3M
        editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
        //可使用监听函数在上传图片的不同阶段做相应处理
        editor.config.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                //这个是用来回显的
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                //data是我后台返回的图片调用地址：url
                var url = result.data;
                sleep(1)
                insertImg(url)
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }
        //以上配合controller层图片上传服务器代码就可以完成图片的保存，
        //保存在服务器上，并且图片回显到富文本编辑器中，
        //以下是将富文本编辑器中的内容保存或修改进数据库
        editor.config.onchange = function () {
            // 读取 html（在有图片回显时，有图片回显的地址，包含有html标签的）
            var html = editor.txt.html();
            // 读取 text（在有图片回显时，没有有图片回显的地址，不包含有html标签，就是纯文本）
            var text = editor.txt.text();
            //作用：去掉图片访问地址的中文双引号（有的同学加上中文“”会报错，而有的不会报错，加上“”报错的同学可以加上一下两行代码）
            while (html.indexOf('"') != -1)
                html = html.replace('"', "");
        };
        editor.create();

        // 清空编辑器内容。
        editor.txt.clear()
        if (text != null && text != undefined && text != 'undefined') {
            text = text.replaceAll('&lt;', '<').replaceAll('&gt;', '>')
            console.log(text)
            // 重新设置编辑器内容
            editor.txt.html(text)
        }
        if (nId != null && nId != undefined) {
            $('#nId').val(nId)
        }
        if (createTime != null && createTime != undefined) {
            $('#createTime').val(createTime)
        }
    })


    /** 保存 **/
    function saveNote() {
        var nId = $("[id='nId']").val()
        // 笔记内容
        // var textbox = document.getElementById("textbox").innerHTML
        var textbox = editor.txt.html()
        var createTime = $('#createTime').val();
        if (createTime == null || createTime == undefined) {
            createTime = new Date();
        }
        var query = {
            'nid': nId,
            'text': textbox,
            'createTime': createTime
        };
        $.ajax({
            url: '/n/v1/saveOrUpdate',
            type: "POST",
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',//发送格式（JSON串）
            data: JSON.stringify(query),//发送参数（JSON串）
            success: function (results) {
                if (results.data) {
                    layer.msg("保存成功", {icon: 1, time: 2000}, function () {
                        // 关闭当前页面
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        getHistoryByDay(today);
                        //重新加载父页面
                        parent.location.reload();
                    });
                } else {
                    layer.msg("保存失败", {icon: 1, time: 2000}, function () {
                        // 关闭当前页面
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        getHistoryByDay(today);
                        //重新加载父页面
                        parent.location.reload();
                    });
                }
            }
        });
    }

    /**
     * 休息一会
     * @param numberMillis
     */
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }

</script>
<script th:src="@{base/datepicker/jquery.datetimepicker.js(v=${version})}"></script>
<script th:src="@{note/note.js(v=${version})}"></script>
</html>